<template>
  <a-modal
    title="菜单"
    :dialogStyle="{top:'10px'}"
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleSubmit"
    :confirm-loading="confirmLoading"
    okText="保存"
  >
    <a-spin :spinning="loading">
      <a-tree
        v-model="checkedKeys"
        checkable
        :tree-data="treeData"
        :replaceFields="replaceFields"
        @check="onCheck"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import { getMenuTree } from '@/api/menus'
import { formatMenus } from '@/utils/common'

export default {
  name: 'MenuTree',
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      visible: false,
      loading: false,
      confirmLoading: false,
      replaceFields: {
        children: 'children', title: 'title', key: 'id'
      },
      checkedKeys: [],
      checkedKey: [],
      treeData: []
    }
  },
  created () {
    this.visible = true
    this.getList()
  },
  methods: {
    onCheck (checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
      this.checkedKey = checkedKeys.concat(info.halfCheckedKeys)
    },
    getList () {
      this.loading = true

    },
    handleSubmit () {
      this.confirmLoading = true
     
    },
    handleCancel () {
      this.visible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
